<template>
  <div class="note-index">
    <top-header></top-header>

    <div class="search-div">
      <div class="search-one-div">
        <search-one @search="onSearch"></search-one>
      </div>

      <span class="iconfont iconshaixuan"></span>
    </div>

    <div class="common-list-body" v-fullheight>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <!-- <div class="list-item" v-for="(item, key) in listSource" :key="key"> -->
          <van-swipe-cell v-for="(item, key) in listSource" :key="key" class="list-item" :before-close="beforeClose" :stop-propagation="true">
            <div class="list-item-cell">
              <div class="name">{{ item.content }}</div>
              <div class="item">
                <span class="title">关联项目：</span>
                <span class="des">{{ item.projectName }}</span>
              </div>
              <div class="item">
                <span class="title">关联业务：</span>
                <span class="des">{{ item.businessName }}</span>
              </div>
              <div class="item">
                <span class="title">关联干系人：</span>
                <div class="des">{{ item.stakeholderList && item.stakeholderList.length ? Array.from(item.stakeholderList, (res) => res.stakeholderName).join(",") : "" }}</div>
              </div>
              <div class="item center">
                <span class="title">创建时间：</span>
                <span class="des">{{ item.createTime }}</span>
              </div>
            </div>
            <template #right>
              <div class="swipe-cell-right">
                <div class="c-blue" @click="goEdit(item)">编辑</div>
                <div class="c-red" @click="actionStatus.delete = { item, idx: key }">删除</div>
              </div>
            </template>
          </van-swipe-cell>
          <!-- </div> -->
        </van-list>
      </van-pull-refresh>

      <router-link class="add-div" :to="{ name: 'NoteAdd', query: { projectId, projectName } }">
        <span class="iconfont iconxinzeng"></span>
        <span>新增</span>
      </router-link>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import TopHeader from "@/components/TopHeader.vue";
import { List, Cell, PullRefresh, SwipeCell, Button } from "vant";
import SearchOne from "@/components/SearchOne.vue";
import Api from "@/api";
import Base from "@/utils/base";

@Component({
  name: "NoteIndex",
  components: {
    TopHeader,
    SearchOne,
    VanList: List,
    VanCell: Cell,
    VanPullRefresh: PullRefresh,
    VanSwipeCell: SwipeCell,
    VanButton: Button
  }
})
export default class NoteIndex extends Base {
  private listSource: any[] = [];
  private loading = false;
  private finished = false;
  private refreshing = false;

  private pageNum = 1;
  private pageSize = 20;
  private sortBy = "createTime";
  private order = "desc";
  private projectId = "";
  private projectName = "";
  private searchValue = "";
  private actionStatus = {
    delete: null as any
  };

  private created() {
    this.projectId = (this.$route.query.projectId ? this.$route.query.projectId : "") as string;
    this.projectName = (this.$route.query.projectName ? this.$route.query.projectName : "") as string;
  }

  private onSearch(event: any) {
    this.searchValue = event;
    this.refreshing = true;
    this.onRefresh();
  }

  private onLoad() {
    if (this.finished) {
      return;
    }
    setTimeout(async () => {
      if (this.refreshing) {
        this.pageNum = 1;
        this.refreshing = false;
      }
      const res = await Api.GetMyNoteList(this.listParams);
      if (res && res.code === 200) {
        if (this.pageNum === 1) {
          this.listSource = res.rows;
        } else {
          this.listSource.push(...res.rows);
        }
        if (res.total <= this.listSource.length) {
          this.finished = true;
        }
        this.pageNum++;
      } else {
        this.finished = true;
      }
      this.loading = false;
    }, 500);
  }

  private onRefresh() {
    // 清空列表数据
    this.finished = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    this.loading = true;
    this.onLoad();
  }

  beforeClose({ position, instance }: any) {
    switch (position) {
      case "left":
      case "cell":
      case "outside":
        instance.close();
        break;
      case "right":
        if (this.actionStatus.delete) {
          this.$dialog
            .confirm({
              message: "确定删除吗？"
            })
            .then(async () => {
              // instance.close();
              await this.onDelete();
            });
        }

        break;
    }
  }

  private async onDelete() {
    const toast = this.$toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: "正在删除..."
    });
    const res = await Api.DeleteNote(this.actionStatus.delete.item.guid);
    if (res.code === 200) {
      this.listSource.splice(this.actionStatus.delete.idx, 1);
    }

    toast.clear();
    this.actionStatus.delete = null;
  }

  private goEdit(item: any) {
    this.$router.push({
      name: "NoteEdit",
      query: {
        guid: item.guid,
        projectId: this.projectId,
        projectName: this.projectName
      }
    });
  }

  get listParams() {
    return {
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      sortBy: this.sortBy,
      order: this.order,
      projectId: this.projectId,
      searchValue: this.searchValue
    };
  }
}
</script>

<style lang="less" scoped>
.note-index {
  .search-div {
    background-color: white;
    display: flex;
    align-items: center;
    .iconshaixuan {
      padding: 10px 10px 10px 0px;
      font-size: 22px;
      color: #bfbfbf;
    }
    .search-one-div {
      flex: 1;
    }
  }

  .list-item {
    margin: 10px 10px 0px 10px;
    background: #ffffff;
    border-radius: 8px;
    display: block;
    position: relative;
    /deep/.van-swipe-cell__right {
      overflow: hidden;
      transform: translateX(101%);
    }
    .van-swipe-cell {
      border-radius: 8px;
    }
    .list-item-cell {
      padding: 15px;
    }
    .name {
      font-size: 16px;
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      // word-break: break-all;
    }
    .item {
      color: #717787;
      margin-top: 8px;
      display: flex;

      .title {
        width: 90px;
      }
      .des {
        flex: 1;
      }
    }
    .center {
      align-items: center;
    }
  }

  .ddd {
    height: 100%;
    & > * {
      height: 100%;
    }
  }

  .add-div {
    position: fixed;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid#d6d6d6;
    border-radius: 50px;
    color: white;
    right: 14px;
    bottom: 143px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    .iconxinzeng {
      font-size: 20px;
    }
  }
}
</style>
